<template>
    <div class="main">
        <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
                style="font-weight: bold;">设置本校区开设教学的行政班级 (各年级设置的班级) </span> </div>
        <div class="main-body">
            <el-row>
                <el-col :span="14">
                    <div class="main-header float-left">

                        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                            <el-form-item label="筛选条件：">
                                <el-select v-model="formInline.xq" placeholder="请选择">
                                    <el-option v-for="item in ddl_lb_list" :key="item" :label="item" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-select v-model="formInline.nj" placeholder="请选择" clearable>
                                    <el-option v-for="(item, index) in ddl_bb_list" :key="index" :label="item.mc"
                                        :value="item.dm">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="筛选条件：">
                               
                                <el-input v-model="formInline.xm" placeholder="请输入" clearable></el-input>
                            </el-form-item> -->


                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                                <el-button type="primary" icon="el-icon-plus" @click="addcurse">新增班级</el-button>
                            </el-form-item>
                        </el-form>

                    </div>
                    <div class="main-center float-left">
                        <el-table :data="tableData" :span-method="reconstructionStuCell" style="width: 100%"
                            height="650">
                            <el-table-column prop="name" label="年级"></el-table-column>
                            <el-table-column prop="subject" label="课程"></el-table-column>
                            <el-table-column prop="BJMC" label="班级"></el-table-column>
                            <el-table-column prop="XM" label="班主任"></el-table-column>
                            <el-table-column prop="RS" label="人数"></el-table-column>
                            <el-table-column label="管理操作" width="200">
                                <template slot-scope="scope" style="z-index: -9999;">
                                    <el-button @click="handleEdit(scope.row)" type="text" size="small"
                                        style="color: #ff4d4f;" icon="el-icon-edit">编辑</el-button>
                                    <el-button @click="handledel(scope.row)" type="text" size="small"
                                        style="color: #ff4d4f;" icon="el-icon-delete">删除</el-button>
                                </template>
                            </el-table-column>



                        </el-table>
                        <!-- <el-table
                            :data="tableData.slice((formInline.currentPage - 1) * formInline.limit, formInline.currentPage * formInline.limit)"
                            height="650" style="width: 100%;margin-top: 6px;"
                            :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
                            <el-table-column prop="XM" label="姓名"></el-table-column>
                            <el-table-column prop="XB" label="性别"></el-table-column>
                            <el-table-column prop="kcm" label="任教学科"></el-table-column>
                            <el-table-column prop="GWZT" label="岗位状态"></el-table-column>
                            <el-table-column label="管理操作" width="200">
                                <template slot-scope="scope" style="z-index: -9999;">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small"
                                        style="color: #ff4d4f;" icon="el-icon-edit">编辑</el-button>
                                    <el-button @click="handleClick(scope.row)" type="text" size="small"
                                        style="color: #ff4d4f;" icon="el-icon-delete">删除</el-button>
                                </template>
</el-table-column>
</el-table> -->

                        <!-- <div class="footer-pagination">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="formInline.currentPage"
                                :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]" :page-size="formInline.limit"
                                layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
                            </el-pagination>
                        </div> -->
                    </div>
                </el-col>
                <el-col :span="8" style="margin-left: 40px;">
                    <div class="main-header float-left">
                        <div style="text-align: center;">在学籍系统中，对应学期本校区的班级信息</div>
                    </div>
                    <div class="main-center float-left" style="margin-top: 25px;">
                        <el-table :data="tableData" :span-method="reconstructionStuCell2" height="650"
                            style="width: 100%;margin-top: 6px;"
                            :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
                            <el-table-column prop="name" label="年级"></el-table-column>
                            <el-table-column prop="BJMC" label="班级"></el-table-column>

                            <el-table-column prop="RS" label="人数"></el-table-column>

                        </el-table>

                        <!-- <div class="footer-pagination">
                            <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                                :current-page="formInline2.currentPage"
                                :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]" :page-size="formInline2.limit"
                                layout="total, sizes, prev, pager, next, jumper" :total="formInline2.total">
                            </el-pagination>
                        </div> -->
                    </div>
                </el-col>
            </el-row>


            <el-dialog title="行政班级设置详细信息显示与操作窗口" :visible.sync="dialogDetails" width="40%">
                <div>

                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">

                        <el-form-item label="选择班级所在年级:" prop="nj">
                            <el-select v-model="ruleForm.nj" placeholder="请选择">
                                <el-option v-for="(item, index) in ddl_bb_list" :key="index" :label="item.mc"
                                    :value="item.dm">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择行政班的名称:" prop="banj">
                            <el-select v-model="ruleForm.banj" placeholder="请选择">
                                <el-option v-for="(item, index) in banjlist" :key="index" :label="item.MC"
                                    :value="item.DM">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设置班级的班主任:" prop="TeacherID" >
                            <el-select v-model="ruleForm.TeacherID" placeholder="请选择">
                                <el-option v-for="(item, index) in jzgList" :key="index" :label="item.XM"
                                    :value="item.TeacherID">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="选择开设的课程" prop="type">
                            <el-checkbox-group v-model="ruleForm.type">
                                <el-checkbox v-for="(item, index) in radioList" :key="index" :label="item.DM"
                                    name="type">{{ item.mc }}</el-checkbox>

                            </el-checkbox-group>
                        </el-form-item> -->

                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
                            <el-button @click="dialogDetails = false">取 消</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-dialog>


        </div>
    </div>
</template>
<script>
import httplogin from "../../api/login";
export default {
    name: 'Social',
    data() {
        return {
            ruleForm: {
                nj: '',
                banj: '',
                TeacherID: "",
                type: [],

            },
            banjlist: [

            ],
            printOption: {
                id: 'nbprint', // 打印元素的id 不需要携带#号
                popTitle: '教职工基本信息登记表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
            },
            tableData: [],
            tableData2: [],
            formInline: {
                xq: "",
                nj: '',
                xm: '',
                ddl_xz: '',
                ddl_jdfs: '',
                currentPage: 1,
                limit: 10,
                total: 0
            },
            formInline2: {
                xq: "",
                nj: '',
                xm: '',
                ddl_xz: '',
                ddl_jdfs: '',
                currentPage: 1,
                limit: 10,
                total: 0
            },
            ddl_lb_list: [

            ],//类别 options
            ddl_bb_list: [],//办别 options
            ddl_xz_list: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '普通',
                    label: '普通'
                },
                {
                    value: '工读',
                    label: '工读'
                },
                {
                    value: '特教',
                    label: '特教'
                },
            ],//性质 options
            ddl_jdfs_list: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '走读',
                    label: '走读'
                },
                {
                    value: '寄宿',
                    label: '寄宿'
                },
            ],//就读方式 options
            dialogDetails: false,
            JiaoZhiGongInfo: {},
            schoolList: [],
            reslist: [],
            jzgList: [],
            status:true

        }
    },
    mounted() {
        this.getSemesterway();
        this.getGradeway();
        for (let i = 1; i < 31; i++) {
            if(i>9){
                this.banjlist.push({ MC: i + "班", DM: i });
            }else{
                this.banjlist.push({ MC: "0" + i + "班", DM: "0" + i });
            }
            
        }
        this.ruleForm.banj =  this.banjlist[0].DM

    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                         var data = {
                        jxzzfs: "01",
                        nj: this.ruleForm.nj,
                        bjno: this.ruleForm.banj,
                        xq: this.formInline.xq,
                        newXqdm: localStorage.getItem("selXQDM"),
                        bjmc:this.formatbanj(this.ruleForm.banj),
                        bzr:this.ruleForm.TeacherID
                    }
                    if(this.status){
                        httplogin.saveSubject2(data).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg, 3);
                            this.dialogDetails = false
                            this.getXzGlway()
                        }else{
                            this.$message.error(res.data.msg, 3);
                        }
                    })
                    }else{
                        httplogin.updateSubject2(data).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg, 3);
                            this.dialogDetails = false
                            this.getXzGlway()
                        }else{
                            this.$message.error(res.data.msg, 3);
                        }
                    })
                    }
               
                
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        formatbanj(val){
          var obj =  this.banjlist.filter((e)=>{
            return e.DM == val
          })
          return obj[0].MC
        },
        async getGradeway() {
            let res = await httplogin.getGrade();
            if (res.data.code == 200) {
                this.ddl_bb_list = res.data.data.list
                this.ruleForm.nj = this.ddl_bb_list[0].dm
            }
        },
        reconstructionStuCell({ row, column, rowIndex, columnIndex }) {

            let column0Data = row['columnIndex0'];
            let column1Data = row['columnIndex1'];
            let column2Data = row['columnIndex2'];


            //判断条件满足情况下，返回对应的rowspan和colspan数据
            if (
                (column0Data && column0Data.columnIndex == columnIndex) ||
                (column1Data && column1Data.columnIndex == columnIndex) ||
                (column2Data && column2Data.columnIndex == columnIndex)    //姓名组合并

                //满分总分组合并
            ) {
                return row['columnIndex' + columnIndex];
            }
            //if end
        },
        reconstructionStuCell2({ row, column, rowIndex, columnIndex }) {

            let column0Data = row['columnIndex0'];



            //判断条件满足情况下，返回对应的rowspan和colspan数据
            if (
                (column0Data && column0Data.columnIndex == columnIndex)


                //满分总分组合并
            ) {
                return row['columnIndex' + columnIndex];
            }
            //if end
        },
        async getSemesterway() {
            let res = await httplogin.getSemester();
            if (res.data.code == 200) {
                this.ddl_lb_list = res.data.data.list
                this.formInline.xq = this.ddl_lb_list[0]
            }
            this.getXzGlway();
        },
        formatData(list) {
            var list2 = []
            const groups = list.reduce((groups, person) => {
                // const obj = { name: "", subject: "", list: [] }
                const key = person.NJMC;
                if (!groups[key]) {
                    groups[key] = [];
                }
                // obj.name = key;
                // obj.subject = person.group_concat;
                // obj.list.push(person)
                groups[key].push(person);
                // list2.push(obj)
                return groups;
            }, {});



            for (var key in groups) {

                list2.push({ name: key, subject: groups[key][0].group_concat, list: groups[key] })

            }


            this.tableData = this.reconstructionStuData(list2)


        },
        reconstructionStuData(data) {
            if (!Array.isArray(data)) return [];

            let tmpData = [];
            data.forEach((item, i) => {
                //有二级数据的进行处理
                if (Array.isArray(item.list) && item.list.length > 0) {
                    //循环成绩
                    item.list.forEach((sub, j) => {
                        let subData = {};
                        if (j == 0) {
                            //子项第一行数据，和姓名信息同行
                            subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: item.list.length, colspan: 1 } }, item, sub);

                            subData['columnIndex0'] = { columnIndex: 0, rowspan: item.list.length, colspan: 1 };
                        }
                        //其他行数据无须添加 姓名字段信息（第一行数据会合并到结束位置，填充后也会被覆盖）
                        else {

                            subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 0, colspan: 0 } }, sub);
                            subData['columnIndex0'] = { columnIndex: 0, rowspan: 0, colspan: 0 };

                        }
                        //if end
                        tmpData.push(subData);
                    });
                }
                //无子项数据，保留当前位置输出
                else {

                    // tmpData.push(
                    //     Object.assign({ columnIndex0: { columnIndex: 0, rowspan: 1, colspan: 1 } }, item)
                    // );
                    tmpData.push(
                        Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 1, colspan: 1 } }, item)
                    );
                }
            });

            return tmpData;
        },
        async getXzGlway() {
            let data = {
                jxzzfs:"01",
                nj: this.formInline.nj,
                page: this.formInline.currentPage,
                size: this.formInline.limit,
                xq: this.formInline.xq,
                gzXqdm: localStorage.getItem("selXQDM"),
            }
            let res = await httplogin.getXzGl(data);
            if (res.data.code == 200) {
                this.formatData(res.data.data.list);

            }
        },
        handledel(row){
          
            var data = {
                bjId:row.BJ_ID
            }
            this.$confirm('此操作将删除记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                httplogin.delSubject2(data).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.msg, 3);

                        this.getXzGlway()
                    }else{
                        this.$message.error(res.data.msg, 3);
                    }
                })
            }).catch(() => {

            });
        },

        //getGrade

        getNowTimeDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = ('0' + (now.getMonth() + 1)).slice(-2);
            const day = ('0' + now.getDate()).slice(-2);
            // const hours = ('0' + now.getHours()).slice(-2);
            // const minutes = ('0' + now.getMinutes()).slice(-2);
            // const seconds = ('0' + now.getSeconds()).slice(-2);
            const formattedTime = year + "年" + month + "月" + day + "日"
            return formattedTime
        },
        sortPingyinfun(list) {
            list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
            return list
        },
        //点击查看详情 open 弹框
        handleClick(row) {
            this.getOnGuardFacultyInfoway(row)
            this.dialogDetails = true
        },
        addcurse() {
            this.status = true
            var data = {
                GWZT: "1",
                gzXqdm: localStorage.getItem("selXQDM")
            }
            httplogin.getOnGuardFaculty(data).then(res => {
                if (res.data.code == 200) {
                    this.jzgList = res.data.data.facultyInfo
                    this.ruleForm.TeacherID = this.jzgList[0].TeacherID
                }
            })
            this.dialogDetails = true
        },
        async getOnGuardFacultyInfoway(val) {
            var data = {
                jzgId: val.TeacherID
            }
            var res = await httplogin.getOnGuardFacultyInfo(data)
            if (res.data.code == 200) {
                this.JiaoZhiGongInfo = res.data.data.jzgInfo

            }
        },
        //close 弹框
        handleClose() {
            this.dialogDetails = false
        },
        onSubmit() {
            this.getXzGlway()
            // console.log(this.formInline);
        },
        handleEdit(row){
            console.log(row)
            this.status = false
            this.ruleForm.banj = row.BJNO
            this.ruleForm.nj = row.NJ
            var data = {
                GWZT: "1",
                gzXqdm: localStorage.getItem("selXQDM")
            }
            httplogin.getOnGuardFaculty(data).then(res => {
                if (res.data.code == 200) {
                    this.jzgList = res.data.data.facultyInfo
                    this.ruleForm.TeacherID = row.BZR
                }
            })
           
            this.dialogDetails = true
        }

    }
}
</script>

<style scoped>
.main {
    width: 100%;
    float: left;
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
    overflow-x: auto;
    overflow-y: auto;
}

.main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 12px;
}

.float-left {
    width: 100%;
    height: auto;
    float: left;
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.d-flex {
    display: flex;
    align-items: center;
}

.mr-24 {
    margin-right: 24px;
}

.fontcolor {
    color: rgba(0, 0, 0, 0.88);
    word-break: break-word;
    line-height: 1.5714285714285714;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 14px;
    box-sizing: border-box;
}

.footer-pagination {
    padding: 10px 0 0 0;
    text-align: right;
}

.font-all {
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

::v-deep .el-dialog__header {
    background-color: #ff4d4f !important;

}

::v-deep .el-dialog__title {
    line-height: 24px;
    font-size: 20px;
    color: #fff !important;
    /* font-weight: 600; */
}
</style>